<template>
	<view class="color-container">
		<view class="color-con" v-for="(item, index) in colors" @click="selectColor(item, index)">
			<u-icon v-if="item.selected" name="checkmark" color="white" size="28" style="position: absolute;"></u-icon>
			<view :class="['color-inner', {'selected': item.selected}, 'iconfont']" :style="{backgroundColor: item.bgcColor}"></view>
			<!-- <view :class="['color-inner', {'selected': item.selected}, 'iconfont', {'icon-icon-test': item.selected}]" :style="{backgroundColor: item.bgcColor}"></view> -->
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			selectIndex: {
				type: Number,
				default: -1,
			}
		},
		data() {
			return {
				colors: [],
			};
		},
		methods: {
			/** 选择颜色事件
			 * @param {Object} index 索引
			 */
			selectColor(item, index1) {
				this.colors.forEach((item, index) => {
					item.selected = (index == index1)
				});
				this.$emit("selectColor", item, index1)
			},
		},
		watch: {
		    selectIndex: function (val, oldVal) {
		      console.log('new: %s, old: %s', val, oldVal)
		    },
		},
		
		// one("#f4de6b",  "#fffae7",  "#fef4c6",  "#f9e690"),
    // two("#efa367",  "#fdede0",  "#f7d6bb",  "#eea369"),
    // three("#f5ce6f",  "#fef6e3",  "#f8e7bc",  "#f3cf6f"),
    // four("#ef87aa",  "#fbe6ed",  "#f8c9d9",  "#ec88aa"),
    // five("#eb6661",  "#f8dedd",  "#fab5bb",  "#e86760"),
    // six("#d8c6dc",  "#f6f4f7",  "#f1e5f0",  "#d8c7da"),
    // seven("#b386c9",  "#f1e7f2",  "#e0c8e6",  "#b386c9"),
    // eight("#c1e99a",  "#f1fceb",  "#e3f4cf",  "#c2e99a"),
    // nine("#837dab",  "#e6e5ed",  "#c8c5d9",  "#847da7"),
    // ten("#439498",  "#d2eaea",  "#9ecfd1",  "#449599"),
    // eleven("#7ed7a9",  "#e3f7ee",  "#c3edd9",  "#7bd3a9"),
    // twelve("#97d3dd",  "#e8f6f7",  "#cfecf0",  "#98d3d9"),
    // thirteen("#80bdf8",  "#e5f3fe",  "#c4e2fc",  "#82bdf8"),
    // fourteen("#6995ba",  "#e0eaf3",  "#bdd0df",  "#6895b8"),
    // fifteen("#c3def8",  "#f3f8fe",  "#e4f0fc",  "#c3def9"),
    // sixteen("#5ad1b3",  "#d9f6f1",  "#adede1",  "#68d6b9"),
    // seventeen("#7ee7c7",  "#e1faf4",  "#c1f3e7",  "#7ee7c8"),
    // eighteen("#839ee1",  "#e5edfa",  "#c7d3f3",  "#81a0e0"),
    // nineteen("#eb6580",  "#f9e0e6",  "#f3bac8",  "#eb6482"),
    // twenty("#d74294",  "#f4d7e9",  "#eaa6cf",  "#d94293"),
    // twentyOne("#92cc5b",  "#e6f4dd",  "#cce6b8",  "#91c95c"),
    // twentyTwo("#e03d38",  "#f6d4d3",  "#eda0a5",  "#df3c37"),
    // twentyThree("#ed8152",  "#f9e5da",  "#f6c6b2",  "#ed8153"),
    // twentyFour("#f6c382",  "#fcf5e5",  "#f8e4ca",  "#f4c285"),
    // twentyFive("#aea9d1",  "#efeef6",  "#dad7e8",  "#aea8ce"),
    // twentySix("#839ee1",  "#e5edfa",  "#c9d4f1",  "#839cdf"),
    // twentySeven("#7fc1a5",  "#e3f2ed",  "#c3e2d6",  "#80bfa6"),
    // twentyEight("#f19e38",  "#fbead0",  "#f6d59d",  "#f39a34"),
    // twentyNine("#c8c1d1",  "#f3f3f5",  "#e6e2eb",  "#c7c1cf"),
    // thirty("#ebe7f6",  "#fafafc",  "#f4f3f7",  "#eae6f5"),
    // thirtyOne("#8c585a",  "#e7dedf",  "#cab3b6",  "#8a575c"),
    // thirtyTwo("#9d7f7f",  "#eae4e6",  "#d5c6c9",  "#9b7f82"),
    // thirtyThree("#e6d2d3",  "#faf6f5",  "#f3ebe9",  "#e5d1d1"),
    // thirtyFour("#665253",  "#e0dcdb",  "#bbb3b4",  "#654f55"),
    // thirtyFive("#bbc1b7",  "#f2f2f0",  "#e1e3de",  "#bdc0b9"),
    // thirtySix("#9ba290",  "#ebedea",  "#d4d7d0",  "#9da190"),
    // thirtySeven("#818a75",  "#e6e8e5",  "#c8cac0",  "#7f8875"),
    // thirtyEight("#c4cad6",  "#f4f5f7",  "#e4e7ed",  "#c7cbd7"),
    // thirtyNine("#8b94a3",  "#e8e9ed",  "#cccfd8",  "#8a929e"),
    // forty("#a0a7b7",  "#ecedf1",  "#d5d8e1",  "#9fa6b6"),
    // fortyOne("#a6a6a6",  "#ededed",  "#d6d6d6",  "#a6a6a6"),
    // fortyTwo("#777381",  "#e4e4e6",  "#c3c1c6",  "#76737e"),
    // fortyThree("#6c6790",  "#e2e0eb",  "#bfbccf",  "#6d6691"),
    // fortyFour("#88826a",  "#e6e5e1",  "#c9c7bb",  "#88816e");
		
		
		mounted() {
			var obj = {};
			// obj.id = 1;
			// obj.bgcColor = "#000";
			// obj.selected = false;
			// this.colors.push(obj);
			this.deepColorArr.forEach((item, index) => {
				var obj2 = {};
				obj2.id = index + 1;
				obj2.bgcColor = item;
				obj2.selected = this.selectIndex == index;
				this.colors.push(obj2);
			});
			console.log(this.colors);
		}
	}
</script>

<style lang="scss">
	.color-container {
		width: 670rpx;
		height: 870rpx;
		padding: 20rpx;
		box-sizing: border-box;
		border-radius: 50rpx !important;
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		gap: 20rpx;
		.color-con {
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
			box-sizing: border-box;
			height: 100%;
			position: relative;
			.color-inner {
				border-radius: 50%;
				width: 70%;
				height: 75rpx;
				box-sizing: border-box;
				color: white;
				text-align: center;
				line-height: 75rpx;
			}
		}
		
		.selected {
			border: 3rpx solid $themePurpleColor;
		}
	}
</style>
